<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <title>管理员登录</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f8f9fa;
        }
        .login-container {
            width: 400px;
            padding: 20px;
            border: 1px solid #ced4da;
            border-radius: 5px;
            background-color: #ffffff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

    </style>
</head>
<body>
    <div class="login-container">
        <h2 class="text-center">登录</h2>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text"  name="username" class="form-control" id="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password"  name="password" class="form-control" id="password" required>
            </div>
            <button type="submit" class="btn btn-primary btn-block">登录</button>
        </form>

    </div>

    <!-- 错误提示模态框 -->
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script>
        layui.use('form', function () {
            var form = layui.form;

        });
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // 发送请求到服务器进行验证
            $.ajax({
                url: '/admins/login', // 替换为你的后端登录接口
                method: 'POST',
                data: {
                    username: username,
                    password: password
                },
                success: function(response) {
                    if (response.code == 0) {
                        // 登录成功，显示昵称
                        layer.msg("登录成功", {icon: 1, shade: 0.5});
                        setTimeout(function() {
                            window.location.href = '/admins/index'; // 替换为你的重定向地址
                        }, 1000); // 2秒后自动关闭模态框
                    } else {
                        layer.msg("登录失败", {icon: 2, shade: 0.5});
                    }
                },
                error: function() {
                }
            });
        });

    </script>
</body>
</html>